<template>
  <div class="app-container">
    <!-- Canvas数字雨背景效果 -->
    <canvas class="matrix-rain" ref="matrixCanvas"></canvas>
    
    <!-- 系统状态栏 -->
    <div class="system-status-bar">
      <div class="status-item">
        <span class="status-label">系统:</span>
        <span class="status-value online">{{ systemInfo.status === 'ONLINE' ? '在线' : systemInfo.status }}</span>
      </div>
      <div class="status-item">
        <span class="status-label">版本:</span>
        <span class="status-value">{{ systemInfo.version }}</span>
      </div>
      <div class="status-item">
        <span class="status-label">运行时间:</span>
        <span class="status-value">{{ systemInfo.uptime }}</span>
      </div>
      <div class="status-item">
        <span class="status-label">连接数:</span>
        <span class="status-value">{{ systemInfo.connections }}</span>
      </div>
      <div class="status-item">
        <span class="status-label">CPU:</span>
        <span class="status-value cpu-usage">{{ systemInfo.cpuUsage }}%</span>
      </div>
      <div class="status-item">
        <span class="status-label">内存:</span>
        <span class="status-value mem-usage">{{ systemInfo.memoryUsage }}%</span>
      </div>
      <div class="status-item">
        <span class="status-label">安全等级:</span>
        <span class="status-value high">高级</span>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <RouterView />
    </main>
    
    <!-- 浮动的系统日志面板 -->
    <div class="floating-log-panel" v-if="showLogPanel">
      <div class="log-header">
        <div class="log-title">系统日志</div>
        <div class="log-controls">
          <button class="log-btn log-clear" @click="clearLogs">[清空]</button>
          <button class="log-btn log-toggle" @click="showLogPanel = false">[X]</button>
        </div>
      </div>
      <div class="log-content">
        <div v-for="(log, index) in systemLogs" :key="index" class="log-entry">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-level" :class="log.level">[{{ log.level }}]</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
        <div v-if="systemLogs.length === 0" class="log-empty">暂无日志</div>
      </div>
      <div class="log-footer">
        <span class="log-count">总数: {{ systemLogs.length }}</span>
        <span class="log-command">Ctrl+Shift+L 切换日志</span>
      </div>
    </div>
    
    <!-- 系统提示信息 -->
    <div v-if="showSystemTip" class="system-tip">
      <div class="tip-content">
        <el-icon><InfoFilled /></el-icon>
        <span>{{ systemTip }}</span>
      </div>
    </div>
    
    <!-- 安全扫描指示器 -->
    <div v-if="securityScanActive" class="security-scan-indicator">
      <div class="scan-progress">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: securityScanProgress + '%' }"></div>
        </div>
        <div class="scan-status">{{ securityScanStatus }}</div>
      </div>
    </div>
    
    <!-- 快捷键提示浮层 -->
    <div v-if="showKeyboardHints" class="keyboard-hints">
      <div class="hints-header">
        <span>键盘快捷键</span>
        <button class="hints-close" @click="showKeyboardHints = false">[X]</button>
      </div>
      <div class="hints-content">
        <div class="hint-item">
          <span class="hint-keys">Ctrl+Shift+S</span>
          <span class="hint-desc">系统信息</span>
        </div>
        <div class="hint-item">
          <span class="hint-keys">Ctrl+Shift+R</span>
          <span class="hint-desc">重新加载</span>
        </div>
        <div class="hint-item">
          <span class="hint-keys">Ctrl+Shift+L</span>
          <span class="hint-desc">显示/隐藏日志</span>
        </div>
        <div class="hint-item">
          <span class="hint-keys">Ctrl+Shift+K</span>
          <span class="hint-desc">显示快捷键</span>
        </div>
        <div class="hint-item">
          <span class="hint-keys">Ctrl+Shift+D</span>
          <span class="hint-desc">调试模式</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { RouterView } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 系统日志类型
interface SystemLog {
  time: string;
  level: 'INFO' | 'WARNING' | 'ERROR' | 'SUCCESS' | 'SECURITY';
  message: string;
}

// 系统信息状态
const systemInfo = reactive({
  status: 'ONLINE',
  version: 'v2.3.5',
  uptime: '00:00:00',
  connections: 0,
  cpuUsage: 0,
  memoryUsage: 0,
  activeUsers: 0
})

// 响应式状态
const matrixCanvas = ref<HTMLCanvasElement>()
const systemLogs = ref<SystemLog[]>([])
const showLogPanel = ref(false)
const showSystemTip = ref(false)
const systemTip = ref('')
const securityScanActive = ref(false)
const securityScanProgress = ref(0)
const securityScanStatus = ref('')
const showKeyboardHints = ref(false)

// 计时器引用
let uptimeTimer: number | null = null
let connectionsTimer: number | null = null
let resourceMonitorTimer: number | null = null
let securityScanTimer: number | null = null
let matrixAnimationRef: number | null = null

// 添加系统日志
const addSystemLog = (level: 'INFO' | 'WARNING' | 'ERROR' | 'SUCCESS' | 'SECURITY', message: string) => {
  const now = new Date();
  const timeString = now.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  
  systemLogs.value.unshift({ time: timeString, level, message });
  
  // 保持日志数量在合理范围内
  if (systemLogs.value.length > 100) {
    systemLogs.value.pop();
  }
  
  // 同时输出到控制台（开发模式下）
  const consoleMethod = {
    'INFO': console.info,
    'WARNING': console.warn,
    'ERROR': console.error,
    'SUCCESS': console.log,
    'SECURITY': console.log
  }[level];
  consoleMethod(`[${timeString}] [${level}] ${message}`);
};

// 清除系统日志
const clearLogs = () => {
  systemLogs.value = [];
  addSystemLog('INFO', 'System logs cleared');
};

// 更新系统运行时间
const updateUptime = (startTime: number) => {
  const uptimeMs = Date.now() - startTime
  const hours = Math.floor(uptimeMs / 3600000)
  const minutes = Math.floor((uptimeMs % 3600000) / 60000)
  const seconds = Math.floor((uptimeMs % 60000) / 1000)
  
  systemInfo.uptime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
};

// 模拟连接数变化
const simulateConnections = () => {
  // 初始化连接数
  systemInfo.connections = Math.floor(Math.random() * 15) + 1;
  
  // 随机增减连接数
  connectionsTimer = window.setInterval(() => {
    const change = Math.floor(Math.random() * 3) - 1 // -1, 0, 1
    const newConnections = Math.max(0, systemInfo.connections + change)
    
    if (newConnections !== systemInfo.connections) {
      systemInfo.connections = newConnections
      addSystemLog('INFO', `Connections changed to: ${newConnections}`);
    }
  }, 7000)
};

// 模拟资源使用情况
const simulateResourceUsage = () => {
  resourceMonitorTimer = window.setInterval(() => {
    // 模拟CPU使用率（10-70%之间）
    systemInfo.cpuUsage = Math.floor(Math.random() * 60) + 10;
    
    // 模拟内存使用率（20-80%之间）
    systemInfo.memoryUsage = Math.floor(Math.random() * 60) + 20;
  }, 3000);
};

// 模拟安全扫描
const simulateSecurityScan = () => {
  // 每30秒进行一次安全扫描
  securityScanTimer = window.setInterval(() => {
    startSecurityScan();
  }, 30000);
};

// 开始安全扫描
const startSecurityScan = async () => {
  securityScanActive.value = true;
  securityScanProgress.value = 0;
  securityScanStatus.value = 'INITIALIZING_SCAN';
  
  addSystemLog('SECURITY', 'Security scan initiated');
  
  // 模拟安全扫描步骤
  const scanSteps = [
    { progress: 15, status: 'SYSTEM_SCAN', delay: 1000 },
    { progress: 30, status: 'NETWORK_SCAN', delay: 1200 },
    { progress: 45, status: 'FILE_INTEGRITY', delay: 900 },
    { progress: 60, status: 'ENCRYPTION_CHECK', delay: 1100 },
    { progress: 75, status: 'ACCESS_CONTROL', delay: 800 },
    { progress: 90, status: 'VULNERABILITY_SCAN', delay: 1300 },
    { progress: 100, status: 'SCAN_COMPLETE', delay: 500 }
  ];
  
  for (const step of scanSteps) {
    await new Promise(resolve => setTimeout(resolve, step.delay));
    securityScanProgress.value = step.progress;
    securityScanStatus.value = step.status;
    addSystemLog('SECURITY', `Scan progress: ${step.status} (${step.progress}%)`);
  }
  
  // 扫描完成后延迟隐藏
  await new Promise(resolve => setTimeout(resolve, 1000));
  securityScanActive.value = false;
  
  // 显示安全提示
  showTip('Security scan completed successfully', 3000);
};

// 键盘事件处理
const handleKeyDown = (e: KeyboardEvent) => {
  // Ctrl/Cmd + Shift + S 显示系统信息
  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'S') {
    e.preventDefault()
    showSystemInfo()
  }
  
  // Ctrl/Cmd + Shift + R 重新加载
  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'R') {
    e.preventDefault()
    addSystemLog('INFO', 'System reload initiated by user');
    ElMessage({ message: 'System reloading...', type: 'info' });
    // 实际项目中可以添加重新加载的逻辑
  }
  
  // Ctrl/Cmd + Shift + L 显示/隐藏日志面板
  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'L') {
    e.preventDefault()
    showLogPanel.value = !showLogPanel.value;
    addSystemLog('INFO', `System logs panel ${showLogPanel.value ? 'shown' : 'hidden'}`);
  }
  
  // Ctrl/Cmd + Shift + K 显示快捷键提示
  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'K') {
    e.preventDefault()
    showKeyboardHints.value = !showKeyboardHints.value;
    addSystemLog('INFO', `Keyboard shortcuts hints ${showKeyboardHints.value ? 'shown' : 'hidden'}`);
  }
  
  // Ctrl/Cmd + Shift + D 切换调试模式
  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
    e.preventDefault()
    toggleDebugMode();
  }
};

// 显示系统信息
const showSystemInfo = () => {
  addSystemLog('INFO', 'System info requested by user');
  
  console.log('\n=== SYSTEM STATUS REPORT ===');
  console.log(`- Status: ${systemInfo.status}`);
  console.log(`- Version: ${systemInfo.version}`);
  console.log(`- Uptime: ${systemInfo.uptime}`);
  console.log(`- Active Connections: ${systemInfo.connections}`);
  console.log(`- CPU Usage: ${systemInfo.cpuUsage}%`);
  console.log(`- Memory Usage: ${systemInfo.memoryUsage}%`);
  console.log(`- Security Level: HIGH`);
  console.log(`- Protocol: TCP/IP v4.2`);
  console.log(`- Encryption: AES-256`);
  console.log('==========================\n');
  
  showTip('System information printed to console', 3000);
};

// 显示系统提示
const showTip = (message: string, duration: number = 3000) => {
  systemTip.value = message
  showSystemTip.value = true
  
  // 添加提示日志
  addSystemLog('INFO', `System tip: ${message}`);
  
  setTimeout(() => {
    showSystemTip.value = false
  }, duration)
};

// 切换调试模式
const toggleDebugMode = () => {
  // 在实际项目中可以实现真正的调试模式切换
  const isDebugMode = localStorage.getItem('debugMode') === 'true';
  const newDebugMode = !isDebugMode;
  
  localStorage.setItem('debugMode', newDebugMode.toString());
  addSystemLog('WARNING', `Debug mode ${newDebugMode ? 'enabled' : 'disabled'}`);
  
  showTip(`Debug mode ${newDebugMode ? 'activated' : 'deactivated'}`, 3000);
};

// 初始化Canvas数字雨效果
const initMatrixRain = () => {
  const canvas = matrixCanvas.value;
  if (!canvas) return;
  
  const ctx = canvas.getContext('2d');
  if (!ctx) return;
  
  // 设置Canvas尺寸
  const setCanvasSize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  };
  
  setCanvasSize();
  window.addEventListener('resize', setCanvasSize);
  
  // 中文字符集（黑客风格词汇）
  const chars = '系统安全管理员权限控制访问数据协议加密解密防火墙入侵检测终端网络监控扫描认证'.split('');
  const fontSize = 14;
  const columns = Math.floor(canvas.width / fontSize);
  
  // 每个列的起始位置
  const drops: number[] = [];
  const speeds: number[] = [];
  for (let i = 0; i < columns; i++) {
    drops[i] = Math.floor(Math.random() * -100);
    speeds[i] = 1 + Math.random() * 2; // 随机速度
  }
  
  // 绘制数字雨
  const drawMatrixRain = () => {
    ctx.fillStyle = 'rgba(0, 20, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.font = `${fontSize}px monospace`;
    
    for (let i = 0; i < drops.length; i++) {
      const text = chars[Math.floor(Math.random() * chars.length)];
      
      // 随机透明度，创建深度感
      const opacity = 0.3 + Math.random() * 0.7;
      
      // 根据位置设置不同颜色，创造层次感
      if (drops[i] * fontSize > canvas.height * 0.7) {
        ctx.fillStyle = `rgba(0, 255, 65, ${opacity})`;
      } else if (drops[i] * fontSize > canvas.height * 0.4) {
        ctx.fillStyle = `rgba(0, 200, 50, ${opacity})`;
      } else {
        ctx.fillStyle = `rgba(0, 150, 40, ${opacity})`;
      }
      
      // 随机高亮一些字符
      if (Math.random() > 0.99) {
        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
      } else if (Math.random() > 0.95) {
        ctx.fillStyle = `rgba(0, 255, 255, ${opacity})`;
      }
      
      ctx.fillText(text, i * fontSize, drops[i] * fontSize);
      
      // 当字符到底部或随机重置
      if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
        drops[i] = 0;
        speeds[i] = 1 + Math.random() * 2; // 重新设置随机速度
      }
      
      drops[i] += speeds[i];
    }
    
    // 持续动画
    matrixAnimationRef = requestAnimationFrame(drawMatrixRain);
  };
  
  // 启动动画
  drawMatrixRain();
  
  // 清理函数
  onUnmounted(() => {
    window.removeEventListener('resize', setCanvasSize);
    if (matrixAnimationRef) {
      cancelAnimationFrame(matrixAnimationRef);
    }
  });
};

// 页面挂载时初始化
onMounted(() => {
  // 添加系统初始化日志
  addSystemLog('SUCCESS', '核心模块已初始化');
  addSystemLog('INFO', `正在加载系统版本: ${systemInfo.version}`);
  
  // 启动运行时间计时器
  const startTime = Date.now()
  updateUptime(startTime)
  
  // 每秒钟更新一次运行时间
  uptimeTimer = window.setInterval(() => {
    updateUptime(startTime)
  }, 1000)
  
  // 模拟连接数变化
  simulateConnections()
  
  // 模拟资源使用情况
  simulateResourceUsage();
  
  // 启动安全扫描定时器
  simulateSecurityScan();
  
  // 添加键盘快捷键支持
  window.addEventListener('keydown', handleKeyDown)
  
  // 初始化Canvas数字雨效果
  initMatrixRain()
  
  // 显示欢迎提示
  setTimeout(() => {
    showTip(`欢迎使用NEXUS操作系统 v${systemInfo.version}`, 5000)
  }, 1000)
  
  // 检查是否有调试模式状态
  const isDebugMode = localStorage.getItem('debugMode') === 'true';
  if (isDebugMode) {
    addSystemLog('WARNING', '调试模式已激活');
    showTip('调试模式已激活', 3000);
  }
});

// 页面卸载时清理
onUnmounted(() => {
  if (uptimeTimer) {
    clearInterval(uptimeTimer)
    uptimeTimer = null
  }
  
  if (connectionsTimer) {
    clearInterval(connectionsTimer);
    connectionsTimer = null;
  }
  
  if (resourceMonitorTimer) {
    clearInterval(resourceMonitorTimer);
    resourceMonitorTimer = null;
  }
  
  if (securityScanTimer) {
    clearInterval(securityScanTimer);
    securityScanTimer = null;
  }
  
  window.removeEventListener('keydown', handleKeyDown)
  
  addSystemLog('INFO', '核心模块已终止');
});

// 监听系统状态变化
watch(() => systemInfo.status, (newStatus) => {
  addSystemLog('SECURITY', `系统状态已更改为: ${newStatus === 'ONLINE' ? '在线' : newStatus}`);
});
</script>

<style scoped>
/* 应用容器 */
.app-container {
  width: 100vw;
  height: 100vh;
  background-color: #080808;
  color: #0f0;
  font-family: 'Courier New', monospace;
  position: relative;
  overflow: hidden;
  /* 黑客风格网格背景 */
  background-image: 
    linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Canvas数字雨背景 */
.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 系统状态栏 */
.system-status-bar {
  height: 24px;
  background-color: #0a0a0a;
  border-bottom: 1px solid #0f0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 1px;
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-label {
  color: #555;
  font-weight: bold;
  opacity: 0.8;
}

.status-value {
  color: #0f0;
  font-family: 'Courier New', monospace;
  min-width: 40px;
  text-align: center;
}

.status-value.online {
  color: #0f0;
  text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
  animation: statusPulse 2s infinite alternate;
}

.status-value.high {
  color: #ffbd2e;
  text-shadow: 0 0 5px rgba(255, 189, 46, 0.3);
}

.status-value.cpu-usage {
  color: #0ff;
}

.status-value.mem-usage {
  color: #ff6b6b;
}

/* 主内容区域 */
.main-content {
  width: 100%;
  height: calc(100vh - 24px);
  position: relative;
  z-index: 10;
  overflow: hidden;
}

/* 浮动的系统日志面板 */
.floating-log-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  max-height: 400px;
  background-color: #0a0a0a;
  border: 1px solid #0f0;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
  z-index: 1000;
  animation: logPanelSlideIn 0.3s ease;
  backdrop-filter: blur(5px);
}

.log-header {
  background-color: #111;
  padding: 8px 12px;
  border-bottom: 1px solid #0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-title {
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 255, 65, 0.5);
  animation: title-flicker 5s infinite;
}

.log-controls {
  display: flex;
  gap: 5px;
}

.log-btn {
  background: none;
  border: none;
  color: #0f0;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  transition: all 0.3s ease;
  padding: 2px 6px;
  border-radius: 2px;
}

.log-btn:hover {
  background-color: rgba(0, 255, 65, 0.1);
  transform: scale(1.05);
  box-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
}

.log-btn.log-toggle:hover {
  color: #ff6b6b;
}

.log-content {
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background-color: rgba(0, 0, 0, 0.5);
}

.log-entry {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(0, 255, 65, 0.1);
}

.log-time {
  color: #555;
  min-width: 70px;
}

.log-level {
  min-width: 65px;
  text-align: center;
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 10px;
  text-transform: uppercase;
}

.log-level.INFO {
  color: #0ff;
  background-color: rgba(0, 255, 255, 0.1);
  border: 1px solid #0ff;
}

.log-level.WARNING {
  color: #ffbd2e;
  background-color: rgba(255, 189, 46, 0.1);
  border: 1px solid #ffbd2e;
}

.log-level.ERROR {
  color: #ff6b6b;
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid #ff6b6b;
}

.log-level.SUCCESS {
  color: #0f0;
  background-color: rgba(0, 255, 0, 0.1);
  border: 1px solid #0f0;
}

.log-level.SECURITY {
  color: #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
  border: 1px solid #ff6b6b;
}

.log-message {
  color: #0f0;
  flex: 1;
  word-break: break-all;
}

.log-empty {
  text-align: center;
  color: #555;
  font-style: italic;
  padding: 20px 0;
}

.log-footer {
  background-color: #111;
  padding: 6px 10px;
  border-top: 1px solid #0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #555;
}

.log-count {
  font-weight: bold;
  color: #0f0;
}

.log-command {
  font-family: 'Courier New', monospace;
  color: #666;
}

/* 系统提示信息 */
.system-tip {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid #0f0;
  padding: 10px 15px;
  border-radius: 4px;
  z-index: 1000;
  animation: slideIn 0.5s ease-out;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
  backdrop-filter: blur(10px);
}

.tip-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f0;
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

/* 安全扫描指示器 */
.security-scan-indicator {
  position: fixed;
  top: 40px;
  right: 20px;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid #0f0;
  padding: 10px;
  border-radius: 4px;
  z-index: 1000;
  animation: slideInLeft 0.3s ease;
  backdrop-filter: blur(5px);
}

.scan-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-bar {
  height: 4px;
  background-color: #0a0a0a;
  border: 1px solid #0f0;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background-color: #0f0;
  background-image: linear-gradient(90deg, #0f0, #0ff, #0f0);
  background-size: 200% 100%;
  animation: progress-flow 2s linear infinite;
  transition: width 0.5s ease;
}

.scan-status {
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 快捷键提示浮层 */
.keyboard-hints {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  background-color: rgba(10, 10, 10, 0.95);
  border: 1px solid #0f0;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
  z-index: 2000;
  animation: fadeIn 0.3s ease;
  backdrop-filter: blur(10px);
}

.hints-header {
  background-color: #111;
  padding: 12px;
  border-bottom: 1px solid #0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #0f0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

.hints-close {
  background: none;
  border: none;
  color: #0f0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.hints-close:hover {
  color: #ff6b6b;
  transform: scale(1.1);
}

.hints-content {
  padding: 15px;
}

.hint-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 255, 65, 0.1);
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.hint-item:last-child {
  border-bottom: none;
}

.hint-keys {
  color: #0ff;
  font-weight: bold;
  min-width: 120px;
}

.hint-desc {
  color: #0f0;
  text-align: right;
}

/* 动画效果 */
@keyframes statusPulse {
  0% {
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
  }
  100% {
    text-shadow: 0 0 15px rgba(0, 255, 65, 0.8), 0 0 30px rgba(0, 255, 65, 0.5);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes logPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progress-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes title-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: 0 0 3px rgba(0, 255, 65, 0.5);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.7;
    text-shadow: 0 0 1px rgba(0, 255, 65, 0.3);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .system-status-bar {
    padding: 0 10px;
    font-size: 10px;
    height: auto;
    min-height: 24px;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .status-item {
    gap: 3px;
    flex: 1;
    min-width: 100px;
    justify-content: center;
  }
  
  .status-label {
    display: none;
  }
  
  .floating-log-panel {
    width: calc(100vw - 40px);
    right: 20px;
    bottom: 20px;
    max-height: 300px;
  }
  
  .system-tip {
    bottom: 10px;
    right: 10px;
    padding: 8px 12px;
    font-size: 11px;
    max-width: 80%;
  }
  
  .security-scan-indicator {
    top: 70px;
    right: 10px;
    left: 10px;
    width: auto;
  }
  
  .keyboard-hints {
    width: calc(100vw - 40px);
    margin: 20px;
  }
}

/* 自定义滚动条 */
.log-content::-webkit-scrollbar {
  width: 6px;
}

.log-content::-webkit-scrollbar-track {
  background: #0a0a0a;
  border-radius: 3px;
}

.log-content::-webkit-scrollbar-thumb {
  background: #090;
  border-radius: 3px;
  border: 1px solid rgba(0, 255, 65, 0.3);
}

.log-content::-webkit-scrollbar-thumb:hover {
  background: #0f0;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
}
</style>

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #080808;
}

::-webkit-scrollbar-thumb {
  background: #090;
  border: 1px solid rgba(0, 255, 65, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: #0f0;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
}

